<template>
    <div style="overflow: hidden">
        <a-tooltip v-bind="$attrs" v-if="isShowTooltip">
            <div class="text-ellipsis" @mouseenter="debounceShowToolTip">
                <slot />
            </div>
        </a-tooltip>
        <div class="text-ellipsis" @mouseenter="debounceShowToolTip" v-else>
            <slot />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useEventListener } from '@/hooks/event/useEventListener';
import { debounce } from '@/utils/util';
export default defineComponent({
    setup() {
        const isShowTooltip = ref<any>(false);
        const showToolTip = (e) => {
            const res = checkEllipsis(e.target.firstElementChild);
            isShowTooltip.value = res;
        };
        const checkEllipsis = (cellChild: any) => {
            const getPadding = (el: HTMLElement) => {
                const style = window.getComputedStyle(el, null);
                const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
                const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
                const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
                const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
                return {
                    left: paddingLeft,
                    right: paddingRight,
                    top: paddingTop,
                    bottom: paddingBottom
                };
            };

            // 仅仅粘贴相关的
            let target: any = null;
            target = cellChild.parentElement.parentElement || cellChild.parentElement.parentElement.parentElement;

            if (!target) {
                return;
            }
            const range = document.createRange();
            range.setStart(cellChild, 0);
            range.setEnd(cellChild, cellChild.childNodes.length);
            let rangeWidth = range.getBoundingClientRect().width;
            let rangeHeight = range.getBoundingClientRect().height;

            const offsetWidth = rangeWidth - Math.floor(rangeWidth);
            if (offsetWidth < 0.001) {
                rangeWidth = Math.floor(rangeWidth);
            }
            const offsetHeight = rangeHeight - Math.floor(rangeHeight);
            if (offsetHeight < 0.001) {
                rangeHeight = Math.floor(rangeHeight);
            }

            const { left, right } = getPadding(target); // 见下方
            const horizontalPadding = left + right;
            // console.log(`原本宽度：${rangeWidth}，现在宽度:${cellChild.offsetWidth}`);
            if (rangeWidth + horizontalPadding > target.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
                return true;
            }
            return false;
        };
        const debounceShowToolTip = debounce(showToolTip, 200);

        // 改变窗口大小就改为false，不然会出现闪现
        useEventListener({
            fn: () => {
                isShowTooltip.value = false;
            }
        });
        return { isShowTooltip, debounceShowToolTip };
    }
});
</script>

<style scoped>
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>